<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="resources/css/ext-all.css">
<script type="text/javascript" src="resources/js/ext-base.js"></script>
<script type="text/javascript" src="resources/js/ext-all.js"></script>
<script type="text/javascript" src="resources/js/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
/*Ext.onReady(
function(){
	Ext.MessageBox.alert("prompt","hello,welcome to extjs!");
}
);*/

Ext.onReady(function(){
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
          //使用表单提示
          Ext.QuickTips.init();
          Ext.form.Field.prototype.msgTarget = 'side';
        
        //定义表单
          var simple = new Ext.FormPanel({
            labelWidth: 100,
            url : '../houseHandler.do?action=editHouse',
          	monitorValid : true,// 把有formBind:true的按钮和验证绑定
            baseCls: 'x-plain',
            defaults: {width: 200},
            defaultType: 'textfield',//默认字段类型
                 
            //定义表单元素
            items: [{
						fieldLabel : 'ID',
						name : 'hid',
						allowBlank : false,
						readOnly: true
					},{
						fieldLabel : '标题',
						name : 'name',
						allowBlank : false
					}, {
						fieldLabel : '租金',
						name : 'hireprice'
					}, {
						fieldLabel : '联系人',
						name : 'linkman'
					}, {
						fieldLabel : '联系电话',
						name : 'linktel'
					},{
					fieldLabel : '几室',
					xtype : "combo",
					hiddenName : "room",// 大家要注意的是hiddenName和name属性，name只是下拉列表的名称，作用是可通过，而hiddenName才是提交到后台的input的name。如果没有设置hiddenName，在后台是接收不到真正的值的。
							store : new Ext.data.SimpleStore({
										fields : ['a', 'b'],
										data : [['1', '一'], ['2', '二'],
												['3', '三']]
									}),
							valueField : 'a',
							displayField : 'b',
							mode : 'local',
							triggerAction : 'all',
							forceSelection : true,
							selectOnFocus : true,
							editable : false,
							readOnly : true,
							emptyText : "无限制！"
					},{
					fieldLabel : '几厅',
					xtype : "combo",
					hiddenName : "ting",// 大家要注意的是hiddenName和name属性，name只是下拉列表的名称，作用是可通过，而hiddenName才是提交到后台的input的name。如果没有设置hiddenName，在后台是接收不到真正的值的。
							store : new Ext.data.SimpleStore({
										fields : ['a', 'b'],
										data : [['1', '一'], ['2', '二'],
												['3', '三']]
									}),
							valueField : 'a',
							displayField : 'b',
							mode : 'local',
							triggerAction : 'all',
							forceSelection : true,
							selectOnFocus : true,
							editable : false,
							readOnly : true,
							emptyText : "无限制！"
					},
					{
						fieldLabel : "区域",
							xtype : 'combo',
							store : new Ext.data.SimpleStore({
										fields : ['id', 'name'],
										data : Ext.grid.areaComboBoxItems
									}),
							valueField : "id",
							displayField : "name",
							mode : 'local',
							forceSelection : true,// 必须选择一项
							emptyText : '请选择区域...',// 默认值
							name : "area",
							hiddenName : "area",// hiddenName才是提交到后台的input的name
							editable : false,// 不允许输入
							triggerAction : 'all',// 因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。
							id : 'parent_id2',
							name : 'parent2',
							listeners : {
								select : function(combo, record, index) {
									houseService.getAllStreets(combo.value,
											function(data) {
												if (data != null) {
													var list2 = [];
													for (var i = 0; i < data.length; i++) {
														list2[i] = [
																data[i].sid,
																data[i].sname];
													}
													Ext.getCmp('child_id2')
															.clearValue();
													Ext.getCmp('child_id2').store
															.loadData(list2);
												}
											});

								}
							}
						}
						, {
							fieldLabel : "街道",
							xtype : 'combo',
							store : new Ext.data.SimpleStore({
										fields : ['id', 'name'],
										data : []
									}),
							valueField : "id",
							displayField : "name",
							// 数据是在本地
							mode : 'local',
							forceSelection : true,// 必须选择一项
							emptyText : '请选择街道...',// 默认值
							hiddenName : 'interviewsDetail.child_category',// hiddenName才是提交到后台的input的name
							editable : false,// 不允许输入
							triggerAction : 'all',// 因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。
							allowBlank:false,//该选项值不能为空
							id : 'child_id2',
							name : "street",
							hiddenName : "street2"
					}, {
						fieldLabel : '房屋设施',
						 xtype: 'textarea',
						name : 'housething'
					}
            ], 
            buttons: [{
               text: '确定',
              formBind : true,
               type: 'submit',
               //定义表单提交事件
               handler:function(){
                              if(simple.form.isValid()){//验证合法后使用加载进度条
                           Ext.MessageBox.show({
                              title: '请稍等',
                              msg: '正在加载...',
                              progressText: '',
                              width:300,
                              progress:true,
                              closable:false,
                              animEl: 'loading'
                           });
                           //控制进度速度
                           var f = function(v){
                            return function(){
                                    var i = v/11;
                                    Ext.MessageBox.updateProgress(i, '');
                                    };
                           };

                           for(var i = 1; i < 13; i++){
                              setTimeout(f(i), i*150);
                           }
                                  
                          //提交到服务器操作
                          simple.form.doAction('submit',{
                            url:'login.do',//文件路径
                            method:'post',//提交方法post或get
                            params:'',
                            //提交成功的回调函数
                            success:function(form,action){
                                 if (action.result.msg=='ok') {
                                    window.location='index.jsp';
                                 } else {
                                    Ext.Msg.alert('登陆失败',action.result.msg);
                                 }
                            },
                            //提交失败的回调函数
                            failure:function(){
                                 Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
                            }
                          });
                        }                                                    
               }
            },{
               text: '取消',
               handler:function(){simple.form.reset();}//重置表单
            }]
         });    
                //定义窗体
               win = new Ext.Window({
                  id:'win',
                  title:'添加房屋信息',
                  layout:'fit',   //布局方式fit，自适应布局               
                  width:350,
                  height:400,
                  modal:true,
                  plain:true,
                        bodyStyle:'padding:5px;',
                  maximizable:false,//禁止最大化
                  closeAction:'close',
                  closable:false,//禁止关闭
                  collapsible:true,//可折叠
                  plain: true,
                  buttonAlign:'center',
                  items:simple//将表单作为窗体元素嵌套布局
               });
               win.show();//显示窗体
                              
       });




</script>
</head>
<body>

</body>
</html>